<template>
  <main class="container">
    <carousel :images="carouselImages" />
    <content-sections :sections="contentSections" />
  </main>
  <app-footer />
</template>


<script> 
import { ref } from 'vue'
import ContentSections from '../components/ContentSections/ContentSections.vue'
import Carousel from '../components/Carousel/Carousel.vue'
import AppFooter from '../components/Footer/Footer.vue'

export default {
  name: 'HomeView',
  components: {
    Carousel,
    ContentSections,
    AppFooter
  },
  setup() {
    // 控制当前显示哪个认证组件：'login' | 'register' | 'forget' | null
    const authView = ref(null)
    // 控制是否显示登录页
    const isLoginView = ref(false)
    // 用户数据
    const user = ref({
      name: '张三',
      avatar: new URL('@/assets/images/avatar/cha1.png', import.meta.url).href,
      isLoggedIn: true
    })
    
    // 轮播图数据
    const carouselImages = ref([
      { 
        url: new URL('@/assets/images/carousel/sfqx.png', import.meta.url).href,
        title: '福州三坊七巷'
      },
      { 
        url: new URL('@/assets/images/carousel/gs.jpg', import.meta.url).href,
        title: '福州鼓山'
      },
      { 
        url: new URL('@/assets/images/carousel/xhgy.jpg', import.meta.url).href,
        title: '福州西湖公园'
      },
      { 
        url: new URL('@/assets/images/carousel/zhl.png', import.meta.url).href,
        title: '福州镇海楼'
      }
    ])
    
    // 内容板块数据
    const contentSections = ref([
      
      {
        title: '地方文化',
        description: '福州有着2200多年的建城史，是国家历史文化名城，孕育了船政文化、三坊七巷文化、寿山石文化等。',
        image: new URL('@/assets/images/contentStation/fdwh.png', import.meta.url).href
      },
      {
        title: '景点预约',
        description: '福州拥有三山两塔一条江、鼓山、西湖公园、国家森林公园等众多自然与人文景观。',
        image: new URL('@/assets/images/contentStation/czwh.jpg', import.meta.url).href
      },
      {
        title: '美食',
        description: '佛跳墙、福州鱼丸、肉燕、锅边糊、荔枝肉等美食彰显了福州菜的独特风味。',
        image: new URL('@/assets/images/contentStation/mswh.jpg', import.meta.url).href
      },
      {
        title: '留言板',
        description: '福州人民热情好客，始终以开放包容之心倾听每一位游客的声音。您的建议是我们进步的源泉，让我们共同打造更美好的榕城之旅！',
        image: new URL('@/assets/images/contentStation/fj.jpg', import.meta.url).href
      },
    
      
      
      
    ])
    
    // 事件处理函数
    // 登录时只显示登录页
    // const handleLogin = () => {
    //   isLoginView.value = true
    //   console.log('进入登录页')
    // }
    // // 退出登录时恢复主内容
    // const handleLogout = () => {
    //   isLoginView.value = false
    //   user.value.isLoggedIn = false
    //   console.log('用户已登出')
    // }
    // const handleViewOrders = () => {
    //   console.log('查看我的订单')
    // }

     // 切换方法
    const handleLogin = () => { 
      authView.value = 'login'
      isLoginView.value = true
      
     }
    const handleLogout = () => {
      isLoginView.value = false
      authView.value = null
      user.value.isLoggedIn = false
    }
    const handleViewOrders = () => { console.log('查看我的订单') }
    const showRegister = () => { authView.value = 'register' }
    const showLogin = () => { authView.value = 'login' }
    const showForget = () => { authView.value = 'forget' }
    const closeAuth = () => { authView.value = null, isLoginView.value = false }
    
    return {
      user,
      carouselImages,
      contentSections,
      handleLogin,
      handleLogout,
      handleViewOrders,
      // isLoginView
      authView,
      showRegister,
      showLogin,
      showForget,
      closeAuth
    }
  }
}
</script>